<!--
  @Author cj
  @Date: 2020/11/04/ 13:53
-->
<template>
  <div class="div_license">
    <div v-if="isActivated!==1">
      <img :src="splogo">
      <p>尊敬的用户，您正在进行软件许可激活，请点击下方按钮确认激活</p>
      <el-button  type="primary" size="small" class="license-btn" @click="activeLicense">{{$t('common.immediatelyActive')}}</el-button>

    </div>

    <div v-if="isActivated===1">
      <img :src="activeSuccess" style="width: 40%">
      <div class="active_tip">
        许可激活成功！
        <span>请在电脑端登录使用</span>
      </div>
    </div>
    <p class="tip">如有疑问请电话联系工作人员</p>
  </div>

</template>

<script>
  import splogo from '../../assets/img/splogo.png'
  import activeSuccess from '../../assets/img/activeSuccess.png'

  export default {
    name: "appLicenseActive",
    data() {
      return {
        queryKey: '',
        isActivated: 0,
        splogo,
        activeSuccess,
      }
    },
    mounted() {
      let Base64 = require('js-base64').Base64
      this.queryKey = Base64.decode(this.$route.query.licenseKey)
      // 校验许可证是否激活
      this.checkLicense()
    },
    methods:{
      // 校验许可证是否激活
      checkLicense(){
        this.$store.dispatch('CheckActivate',this.queryKey).then((res) => {
          if(res.data.meta.success && res.data.data.isActivated===1){
            this.isActivated = res.data.data.isActivated
          }
        })
      },
      // 激活许可证
      activeLicense(){
        this.$store.dispatch('LicenseActivate',this.queryKey).then((res) => {
          if(res.data.meta.success){
            // 操作成功
            this.$message.success(this.$t('common.success'));
            this.checkLicense()
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .div_license{
    padding: 35% 0 0;
    text-align: center;
    width: 100%;
    height: 100%;
    position: relative;
    p{
      font-size: 14px;
      text-align: left;
      padding: 10% 9% 40%;
      color: #666;
      &.tip{
        width: 100%;
        position: absolute;
        padding-top: 0;
        padding-bottom: 0;
        bottom: 2%;
        text-align: center;
        color: #999;
        font-size: 12px;
      }
    }
    button{
      width: 60%;
    }
    .active_tip{
      font-size: 14px;
      color: #666;
      margin-top: 15%;
      span{
        display: block;
        margin-top: 5%;
        font-size: 12px;
      }
    }
  }
</style>
